<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<!-- 引入样式文件 -->
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"
		/>

		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>
		<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<style>
			#app {
				height: 100vh;
				width: 100vw;
				box-sizing: border-box;
				padding: 10px;
				overflow: hidden;
			}
			.wrap {
				/* height: 100%; */
				overflow: auto;
			}
			.city_wrap .title {
				font-size: 14px;
				color: #aaa;
				padding-left: 10px;
			}
			.city_wrap .hot_city {
				display: flex;
				padding: 0 16px;
				margin-top: 20px;
				flex-wrap: wrap;
			}
			.city_wrap .hot_city li {
				width: 30%;
				padding: 10px;
				text-align: center;
				box-sizing: border-box;
				background: #f1f1f1;
				margin: 0 10px 10px 0;
				font-size: 14px;
			}
			.city_title {
				color: #aaa;
				padding: 15px 0;
			}
			.city_item {
				padding: 10px;
				border-bottom: 1px solid #eee;
				font-size: 14px;
			}
			.scroll_keys {
				position: fixed;
				right: 0;
				top: 25%;
				color: #aaa;
				font-size: 12px;
				line-height: 1.4;
				text-align: center;
				padding: 0 5px;
			}
		</style>
	</head>
	<body>
		<div id="app" ref="area_scroll">
			<div class="wrap">
				<!-- 热门城市 -->
				<div class="city_wrap citylist">
					<div class="title">热门城市</div>
					<ul class="hot_city">
						<li :key="index" v-for="(item,index) in cityInfo.hotCities">
							{{item.name}}
						</li>
					</ul>
				</div>
				<!-- 所有城市 -->
				<div class="all_city">
					<div class="city_keys">
						<!-- 城市首字母 -->
						<div
							class="city_alpha citylist"
							v-for="(item,index) in keys"
							:key="index"
						>
							<div class="city_title">{{item}}</div>
							<!-- 首字母对应的城市 -->
							<div
								class="city_item"
								v-for="(city,index1) in cityInfo[item]"
								:key="index1"
							>
								{{city.name}}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="scroll_keys">
				<div @click="selectKey(0)">#</div>
				<div @click="selectKey(index+1)" v-for="(item,index) in keys">
					{{item}}
				</div>
			</div>
		</div>
	</body>
	<script>
		let url = 'https://ele-interface.herokuapp.com/api/posts/cities'

		let vm = new Vue({
			el: '#app',
			data: {
				cityInfo: {}, //城市信息
				keys: [], //城市首字母
				scroll: null,
			},
			created() {
				this.getCityInfo()
			},
			methods: {
				async getCityInfo() {
					const res = await axios.get(url)
          this.cityInfo = res.data
          console.log(res.data);
					// 处理key值  ①
					this.keys = Object.keys(res.data)
          //处理掉最后数组中的最后一个值 hotcities
					console.log(this.keys)
          
					this.keys.pop()
					//对数组进行排序
					this.keys.sort()
					console.log(this.keys)
					this.$nextTick(() => {
						//在页面发生变化之后再初始化
						this.initScroll()
					})
				},
				//实例化better-scroll
				initScroll() {
					this.scroll = new BScroll(this.$refs.area_scroll, { click: true })
				},
				selectKey(index) {
					let el = document.querySelectorAll('.citylist')
					this.scroll.scrollToElement(el[index], 250)
				},
			},
		})
	</script>
</html>
